<template>
	<view class="warp bargain-top">
		<!-- 下拉刷新容器 -->
		<pulldownRefresh ref="pulldownRefresh" :top="190" @refresh="refresh">
			<view class="bargain-box">
				<view class="bargain-good displayFlex">
					<view class="good-img">
						<a href="">
							<img :src="goods.original_img" alt="" width="100%">
						</a>
					</view>
					<view class="good-msg flex">
						<view class="good-title">{{goods.goods_name}}</view>
						<view class="good-downtime">
							<span class="hour">{{hour}}</span>:
							<span class="minute">{{minute}}</span>:
							<span class="seconds">{{seconds}}</span>
							<text>后砍价过期</text>
						</view>
						<view class="good-money displayFlex">
							<view style="color: #d01935;font-size: 14px">￥{{goods.old_price}}</view>
						</view>
					</view>
				</view>
				<view class="bargain-money">
					已砍<text>{{bargain_price}}</text>元，还差<text>{{remain_price}}</text>元
				</view>
				<view class="bargain-bar">
					<view>
						<p></p>
					</view>
				</view>
				<view class="commodity_btn" v-if="bargainShow==true">
					<view class="bargain-btn" id="share" v-if="is_head == 1">
						<button>分享给好友，多砍一刀</button>
					</view>
					<view class="bargain-btn" id="bargain_help_html" v-else>
						<button @click="getBargainHelp()">砍一刀</button>
					</view>
				</view>
				<view v-else>
					<view class="bargain-btn"><button>{{commodityText}}</button></view>
				</view>


				<view class="bargain-help" id="bargain_help_list">
					<h4>砍价帮</h4>
					<view class="help-user displayFlex" v-for="item in helpList">
						<view class="head-img">
							<img :src="item.avatar" alt="" width="25">
						</view>
						<view class="help-hot flex">
							<view class="user_name"> {{item.user_nickname}} </view>
						</view>
						<view class="help-money flex-xy-center">
							<img src="__TMPL__/public/assets/images/dao.png" alt="" width="25">
							<span style="font-size: 14px;">砍掉 {{item.bargain_price}}元</span>
						</view>
					</view>
				</view>
				<view class="help-user bargain-help" id="help_list" onclick="more_help()">更多</view>


			</view>


			<view class="bargain-discount">
				<span class="small"></span>
				<span class="middle"></span>
				<span class="big"></span>
				精选优惠
				<span class="big"></span>
				<span class="middle"></span>
				<span class="small"></span>
			</view>

			<!-- 分类文章列表 -->
			<view class="goods-list">
				<goodsItem v-for="item in articleList" :key="item.id" :item="item" />
				<!-- 上拉加载 -->
				
				<u-loadmore :status="status" bg-color="#f8f8f8" width="95%" margin-top="50" margin-bottom="50" @loadmore="loadMore" />
			</view>
			
		</pulldownRefresh>
	</view>
</template>

<script>
	import pulldownRefresh from '@/components/pulldownRefresh.vue';
	import goodsItem from '@/components/goodsItem.vue';
	export default {
		components: {
			pulldownRefresh,
			goodsItem
		},
		data() {
			return {
				bargain_ok: 0,
				remain_price: '0.00',
				bargain_price: '0.00',
				is_head: 0,
				goods_id: 0,
				group_id: 0,
				order_id: 0,
				text1: 'uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用',
				goods: [],
				helpList: [],
				noticeList: [],
				categoryList: [],
				current: 0,
				currentCategory: {},
				page: 1,
				articleList: [],
				status: 'loading',
				bargainShow: true,
				commodityText: '',
				hour: '00',
				minute: '00',
				seconds: '00',
				orders: []
			};
		},
		onLoad(options) {
			this.goods_id = options.goods_id;
			this.group_id = options.group_id;
			this.order_id = options.order_id;
			this.getBargainList();
			this.gethelpList();
			this.getBargainDetails();

			var create_time = this.orders.add_time;
			console.log(this.orders)
			var last_time = create_time * 1000 + 24 * 60 * 60 * 1000;

			var nowtime = new Date();
			var time = last_time - nowtime;

			var bargain_ok = this.bargain_ok;

			if (bargain_ok == 1) {
				this.bargainShow = false;
				this.commodityText = '砍价成功';
			}

			if (time <= 0) {
				this.bargainShow = false;
				this.commodityText = '砍价已过期';
			} else {
				setInterval(function() {
					nowtime = new Date();
					time = last_time - nowtime;

					var hour = parseInt(time / 1000 / 60 / 60 % 24);
					if (hour < 10) {
						hour = '0' + hour;
					}
					var minute = parseInt(time / 1000 / 60 % 60);
					if (minute < 10) {
						minute = '0' + minute;
					}
					var seconds = parseInt(time / 1000 % 60);
					if (seconds < 10) {
						seconds = '0' + seconds;
					}

					this.hour = hour;
				 this.minute = minute;
					this.seconds = seconds;
					// $('.hour').html(hour);
					// $('.minute').html(minute);
				 // $('.seconds').html(seconds);

				}, 1000);
			}
		},
		onReachBottom() {
			this.loadMore();
		},
		methods: {
			refresh() {
				this.page = 1;
				this.articleList = [];
				this.getBargainList();
			},
			loadMore() {
				if (this.status === 'loadmore') {
					this.getBargainList();
				}
			},
			getBargainDetails() {
				var order_id = this.orders.order_id;
				this.$api.get({
					url: 'portal/shop/bargain_details',
					data: {
						page: this.cpage,
						goods_id: this.goods_id,
						price_id: this.price_id,
						order_id: this.order_id,
					},
					success: res => {
						console.log(res)
						if (res.code === 1) {
							this.goods = res.data.goods;
							this.bargain_price = res.data.bargain_price;
							this.remain_price = res.data.remain_price;
							this.is_head = res.data.is_head;
							this.orders = res.data.orders;
							this.bargain_ok = res.data.bargain_ok;
						} else {
							this.$toast('数据获取失败');
						}
					}
				});
			},
			getBargainHelp() {
				var order_id = this.order_id;
				this.$api.get({
					url: 'portal/shop/bargain_help',
					data: {
						order_id: this.order_id,
					},
					success: res => {
						console.log(res)
						if (res.code === 1) {
							this.bargain_price = res.data;
							this.get_bargain_list();
						} else {
							this.$toast('数据获取失败');
						}
					}
				});
			},
			gethelpList() {
				var order_id = this.order_id;
				this.$api.get({
					url: 'portal/shop/bargain_help_list',
					data: {
						page: 1,
						order_id: order_id
					},
					success: res => {
						console.log(res)
						if (res.code === 1) {
							this.helpList = res.data.bargain_user;
						} else {
							this.$toast('数据获取失败');
						}
					}
				});
			},
			// 获取分类下文章列表
			getBargainList() {
				this.status = 'loading';
				this.$api.get({
					url: 'portal/shop/bargain_list',
					data: {
						page: `${this.page},10`, // 一页显示10条},
					},
					success: res => {
						if (res.code === 1) {
							let articleList = res.data;
							this.articleList = this.articleList.concat(articleList);
							// 分页判断
							if (articleList.length < 10) {
								this.status = 'nomore';
							} else {
								this.status = 'loadmore';
								this.page++;
							}
						} else {
							this.$toast('数据获取失败');
						}
					},
					complete: () => {
						this.$refs.pulldownRefresh && this.$refs.pulldownRefresh
							.endPulldownRefresh(); // 停止刷新动画
					}
				});
			},

		}
	};
</script>

<style lang="scss" scoped>
	.displayFlex {
		display: flex;
	}

	.flex {
		flex: 1;
	}

	.bargain-top,
	.bargain-bottom {
		width: 100%;
		background-color: crimson;
	}

	.bargain-msg {
		padding-top: 10px;
		background-color: rgba(255, 0, 0, 0.2);
		font-size: 12px;
		text-align: center;
	}

	.bargain-msg img {
		vertical-align: sub;
	}

	.bargain-msg a {
		text-decoration: none;
	}

	.bargain-msg label {
		color: #a00606;
	}

	.bargain-box {
		margin: 10px;
		background-color: white;
		border-radius: 10px;
	}

	.bargain-good {
		padding: 5px;
		background-color: #f5f5f5;
		border-radius: 5px;
	}

	.good-img img {
		border-radius: 5px;
	}

	.good-img {
		width: 7rem;
		vertical-align: top;
	}

	.good-msg {
		padding-left: 5px;
	}

	.good-title {
		font-size: 14px;
		color: #656364;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.good-downtime {
		padding: 10px 0;
		font-size: 12px;
	}

	.good-downtime span {
		padding: 3px;
		margin-right: 3px;
		background-color: #58595b;
		color: white;
		border-radius: 5px;
	}

	.good-downtime label {
		color: #656364;
	}

	.good-money {
		padding: 10px 0 0 0;
		font-size: 12px;
		color: #656364;
	}

	.bargain-money {
		text-align: center;
		padding-top: 10px;
	}

	.bargain-money span {
		color: #d01935;
	}

	.bargain-bar {
		padding: 15px;
	}

	.bargain-bar div {
		width: 100%;
		height: 10px;
		border-radius: 10px;
		background-color: #e6e6e6;
	}

	.bargain-bar p {
		width: 19.79%;
		height: 10px;
		border-radius: 10px;
		background-color: #fed724;
	}

	.bargain-btn {
		padding: 0 10px;
	}

	.bargain-btn button {
		width: 100%;
		border-radius: 20px;
		background-color: #fed724;
		border: none;
		color: #ff1605;
		font-weight: bold;
		box-shadow: 0 3px 0 #fbb847;
	}

	.bargain-help {
		margin: 10px;
	}

	.bargain-help h4 {
		text-align: center;
		padding: 10px;
		background-color: #fff6ea;
		color: #735900;
	}

	.help-user {
		background-color: #fff6ea;
		padding: 10px 0;
		color: #9d9894;
		align-items: center;
	}

	.head-img {
		margin: 0 10px;
		vertical-align: top;
	}

	.head-img img {
		border-radius: 50%;
	}

	.help-hot {
		text-align: left;
	}

	.help-money {
		text-align: right;
		margin-right: 10px;
	}

	.help-money img {
		vertical-align: sub;
	}

	.bargain-discount {
		text-align: center;
		color: white;
		padding-bottom: 10px;
	}

	.bargain-discount span {
		display: inline-block;
		background-color: white;
		border-radius: 50%;
		vertical-align: middle;
	}

	.bargain-discount .small {
		width: 3px;
		height: 3px;
	}

	.bargain-discount .middle {
		width: 5px;
		height: 5px;
	}

	.bargain-discount .big {
		width: 7px;
		height: 7px;
	}

	.bargain-bottom {
		font-size: 0;
	}

	.good-box {
		width: 47%;
		display: inline-block;
		margin-left: 2%;
		margin-bottom: 2%;
		background-color: white;
	}

	.good-box img {
		width: 100%;
	}

	.good-box .good-title {
		padding: 5px;
	}

	.shop_label {
		padding: 2px 5px;
		color: white;
		border-radius: 3px;
		background-color: #db3029;
	}

	.good-box .good-money {
		padding: 10px 5px;
		color: #afafaf;
		font-size: 12px;
	}

	.good-box .good-money span {
		color: #db3029;
		font-weight: bold;
	}

	.spe-money {
		font-size: 14px;
		font-weight: bold;
	}

	.good-money label {
		text-decoration: line-through;
	}

	.good-money img {
		width: 10px;
		vertical-align: sub;
		display: inline-block;
	}

	.shadow {
		position: fixed;
		top: 0;
		background-color: rgba(0, 0, 0, 0.8);
		width: 100%;
		height: 100%;
		display: none;
	}

	.wish-box {
		background-color: white;
		width: 80%;
		height: 35%;
		margin: auto;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		border-radius: 10px;
	}

	.bg-img {
		width: 70%;
		position: absolute;
		top: -47%;
		left: 15%;
	}

	.wish-box view span {
		color: #ef241d;
		font-size: 28px;
	}

	.wish-box p {
		text-align: center;
		padding-top: 10px;
		font-size: 20px;
		color: #ef241d;
	}

	a:link {
		text-decoration: none;
	}

	a:visited {
		text-decoration: none;
	}

	a:hover {
		text-decoration: none;
	}

	a:active {
		text-decoration: none;
	}

	/*水平垂直居中*/

	.flex-xy-center {
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		display: -webkit-flex;
	}

	.show_share {
		background: #000;
		position: fixed;
		top: 0;
		z-index: 99;
		left: 0;
		opacity: 0.8;
		display: none;
	}

	.goods-image {
		height: 8.1rem;
		/*width: 8.1rem;*/
		margin: auto;
	}

	.goods-image img {
		width: 100%;
		height: 100%;
	}

	.list-block {
		font-size: .625rem;
	}

	.wish_money {
		text-align: center;
		font-weight: bold;
		padding-top: 22%;
	}

	.wish_money_btn {
		text-align: center;
		padding: 6px;
		width: 80px;
		margin: auto;
		background: #EF241D;
		color: #fff;
		margin-top: 20px;
		border-radius: 4px;
	}

	.bargain-help {
		text-align: center;
		margin: 0;
		position: relative;
		padding-top: 10px;
	}

	.bargain-help:before {
		position: absolute;
		width: 100%;
		height: 1px;
		top: 0;
		left: 0;
		background: #fff;
		z-index: 999;
	}

	.slides-box {
		margin: 94rpx 10rpx 0;
		/*  #ifdef MP  */
		margin-top: 78rpx;
		/*  #endif  */
	}

	.goods-list {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
	}

	.tab {
		background: #fff;
		border: 1px solid rgba(255, 255, 255, 0.4);
		box-sizing: border-box;
		height: 40px;
		line-height: 40px;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 0.75rem;
	}

	.index_banner {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		padding: 20px 5px 5px 5px;
		background: #fff;
		background: #fff;
	}

	.index_banner image {
		width: 100%;
		height: 180px;
	}

	.img_top {
		height: 90px;
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px 5px 5px 5px;
		background: #fff;
	}

	.img_top a {
		width: calc(50% - 2px);
	}

	.img_top image {
		width: 100%;
		height: 90px;
		border-radius: 6px;
	}

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		/*  #ifndef MP  */
		flex: 1; // 小程序不设置flex:1，避免被右上角的胶囊遮挡

		/*  #endif  */
		.logo {
			margin-left: 20rpx;
			font-size: 40rpx;
			font-weight: bold;
		}

		.search-box {
			flex-grow: 1;
			margin: 0 20rpx;
		}
	}

	.stick-top {
		position: fixed;
		top: 0;
		width: 750rpx;
		z-index: 999;
	}
</style>
